<template>
  <div class="home-container">
    <div class="home-card">
      <div class="flex-between m-b-xs">
        <div style="flex: 1; font-size: 14px; color: #026141">计划生产总量</div>
        <div style="flex: 1; font-size: 14px; color: #ff6d00">已完成总量</div>
      </div>
      <div class="flex-between m-b-sm">
        <div class="flex-around" style="flex: 1; color: #262626">
          <div>
            <p style="font-size: 24px">5</p>
            <div>整机</div>
          </div>
          <div>
            <p style="font-size: 24px">2</p>
            <div>配件</div>
          </div>
        </div>
        <div class="vertical-line"></div>

        <div class="flex-around" style="flex: 1; color: #262626">
          <div>
            <p style="font-size: 24px">5</p>
            <div>整机</div>
          </div>
          <div>
            <p style="font-size: 24px">2</p>
            <div>配件</div>
          </div>
        </div>
      </div>
      <van-progress :percentage="75" stroke-width="12" color="linear-gradient(to right, #FCAF29, #FF6D00)" />
    </div>
    <div class="home-header">今日生产</div>
    <div class="home-card flex-between" style="padding-left: 22px; padding-right: 22px">
      <div class="flex-center-column">
        <img style="height: 36px" src="@/assets/image/home/p-icon_0.png" alt="" />
        <div class="color-grey line-height_22">待排产</div>
        <p style="font-size: 20px">24</p>
      </div>
      <div class="flex-center-column">
        <img style="height: 36px" src="@/assets/image/home/p-icon_1.png" alt="" />
        <div class="color-grey line-height_22">生产中</div>
        <p style="font-size: 20px">24</p>
      </div>
      <div class="flex-center-column">
        <img style="height: 36px" src="@/assets/image/home/p-icon_2.png" alt="" />
        <div class="color-grey line-height_22">已完成</div>
        <p style="font-size: 20px">24</p>
      </div>
      <div class="flex-center-column">
        <img style="height: 36px" src="@/assets/image/home/p-icon_3.png" alt="" />
        <div class="color-grey line-height_22">已延期</div>
        <p style="font-size: 20px; color: #ff6d00">24</p>
      </div>
    </div>
    <div class="home-header">生产中列表</div>
    <div>
      <div class="home-card flex-between m-b-xs">
        <div style="font-size: 14px">
          <div style="font-size: 16px">XBK7002185</div>
          <div class="color-grey m-t-xxs">爱普生打印机 WF-C5890a</div>
          <div class="color-grey m-t-xxs">爱普生打印机 WF-C5890a</div>
        </div>
        <div class="flex-center-column">
          <img style="height: 36px" src="@/assets/image/progress/progress_DCC.png" alt="" />
          <div class="color-primary m-t-xxs">待除尘</div>
        </div>
      </div>
    </div>
    <van-empty v-if="!dataList.length" image-size="84" description="暂无数据">
      <template #image>
        <img style="width: 84px;height: 84px;" src="@/assets/image/empty-icon.png" alt="" />
      </template>
    </van-empty>
  </div>
  <!-- <div @click="toJSapi">测试按钮，勿点</div> -->
</template>

<script>
import { getUserPageList } from '@/api/businessOpportunity'
import { getSaleInfo, getOrderInfo } from '@/api/home'
import { reactive, toRefs, computed, nextTick, onMounted, onActivated, ref } from 'vue'
import { getAssetsImages } from '@/utils'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  name: 'Home',
  components: {},
  setup() {
    const store = useStore()
    const router = useRouter()
    const getAssetsImages1 = getAssetsImages
    const userInfo = computed(() => {
      return store.getters['userInfo']
    })
    const state = reactive({
      loading: false,
      dataList: [],
      progressOption: [
        { text: '本日', value: 'TODAY' },
        { text: '本周', value: 'THIS_WEEK' },
        { text: '本月', value: 'THIS_MONTH' },
        { text: '全部', value: '' }
      ]
    })

    onMounted(() => {})

    onActivated(() => {})

    const getUserOption = () => {
      getUserPageList().then((res) => {
        const newDic = transOption(res, { value: 'name', key: 'id' })
        const first = { text: '全部销售', value: '' }
        newDic.unshift(first)
        state.salesmanOption = newDic
      })
    }

    const transOption = (data, formatter = { value: 'dictValue', key: 'dictKey' }) => {
      const newDate = []
      data.map((item) => {
        const obj = {
          text: item[formatter.value],
          value: item[formatter.key]
        }
        newDate.push(obj)
      })
      return newDate
    }

    const getSaleData = () => {
      let params = {
        timeType: state.saleValue,
        ownerUserId: state.ownerUserId
      }
      getSaleInfo(params).then((res) => {
        console.log('res:::', res)
        state.saleData = res
      })
    }

    const saleChange = () => {
      getSaleData()
    }

    const salesmanChange = () => {
      console.log('dddaaa', state.salesmanValue)
      state.ownerUserId = state.salesmanValue
      getSaleData()
      getOrderData()
      getFunnelData()
    }

    const getOrderData = () => {
      let params = {
        timeType: state.orderValue,
        ownerUserId: state.ownerUserId
      }

      getOrderInfo(params).then((res) => {
        console.log('/////', res)
        let list1 = []
        let list2 = []
        let list3 = []
        res.forEach((item) => {
          list1.push(item.statisticalDate)
          list2.push(item.businessTotal)
          list3.push(item.businessCompleteTotal)
        })
        state.orderStatisticsDate = list1
        state.orderBusinessTotal = list2
        state.orderCompleteTotal = list3
        initOrderOption()
      })
    }

    const orderChange = () => {
      getOrderData()
    }

    const toPage = (type) => {
      // const t = new Date().getTime()
      router.push({ path: '/' + type, query: { timeType: state.saleValue, ownerUserId: state.ownerUserId } })
    }
    const toJSapi = () => {
      router.replace({ path: '/jsApi' })
    }

    return {
      ...toRefs(state),
      userInfo,
      getAssetsImages1,
      toPage,
      toJSapi,
      saleChange,
      salesmanChange,
      orderChange
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  padding: 7px 12px;
  background: linear-gradient(180deg, #026141 0%, #f7f7f7 40%, #f7f7f7 100%);
  .home-header {
    margin: 20px 0 10px;
    font-size: 18px;
  }
  .home-card {
    border-radius: 8px;
    background-color: #ffffff;
    padding: 16px;
  }
  .vertical-line {
    width: 1px;
    height: 37px;
    background: rgba(102, 102, 102, 0.2);
  }
  .van-progress {
    border-radius: 12px;
  }
}
</style>
